﻿@{
    ViewBag.Title = "Chat";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var username = User.Identity.IsAuthenticated ? User.Identity.Name : "Anonym";
}
<div class="page-header">
    <h2>Chat</h2>
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="well" id="discussion">

            </div>
        </div>
        <div class="col-sm-4">
            <h5>brugere:</h5>
            <ol id="userlist">

            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <form name="chat">
                <div class="input-group">
                    <input type="text" id="message" class="form-control" />
                    <span class="input-group-btn">
                        <button class="btn btn-default" id="sendmessage">Send</button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="shape"></div>

@section Scripts {
    @Scripts.Render("~/Scripts/jquery.signalR-2.1.1.js")
    @Scripts.Render("~/signalr/hubs")
    <script type="text/javascript">

        $(function () {
            // cached elements
            var userlistElem = document.getElementById('userlist');
            var discElem = document.getElementById('discussion');

            // Declare a proxy to reference the hub.
            var chat = $.connection.chat;

            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message.
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page.
                $('#discussion').append('<div><strong>' + encodedName + '</strong>: ' + encodedMsg + '</div>');
            };

            chat.client.updateUserList = function (userlist) {
                while (userlistElem.firstChild) {
                    userlistElem.removeChild(userlistElem.firstChild);
                }

                for (var i = 0; i < userlist.length; i++) {
                    var user = document.createElement("li");
                    user.textContent = userlist[i].Value;
                    user.id = userlist[i].Value;
                    userlistElem.appendChild(user);
                }
            }
            
            chat.client.getMessages = function (messages) {
                for (var i = 0; i < messages.length; i++) {
                    var msg = messages[i].split(":");
                    var output = document.createElement("div");
                    output.innerHTML = "<strong>" + msg[0] + "</strong>: " + msg[1];
                    discElem.insertBefore(output, null);
                }
            }

            
            // Set initial focus to message input box.
            $('#message').focus();

            var username = "@username";

            // Start the connection.
            $.connection.hub.start().done(function () {
                chat.server.addUser(username);
                chat.server.getUsers();
                chat.server.getMessages();

                $('form[name=chat]').on("submit", function (e) {
                    // Call the Send method on the hub.
                    chat.server.send(username, $('#message').val());

                    // Clear text box and reset focus for next comment.
                    $('#message').val('').focus();
                    e.preventDefault();
                });

                $(window).on("beforeunload", function (e) {
                    console.log('beforeunload');
                    chat.server.removeUser(username);
                });
            });

            $.connection.hub.disconnected(function () {
                if ($.connection.hub.lastError)
                {
                    alertify("Disconnected. Reason: " + $.connection.hub.lastError.message);
                }
            });
        });
    </script>
}